<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var addBtn = $("#addBtn");
            var delBtn = $("#delBtn");
            addBtn.click(function () {
                var dom = '<tr>' +
                    '<form enctype="multipart/form-data" method="post" name="fileInfo">' +
                    '<td>' + '<input type="checkbox" name="delete" ></td>' +
                    '<td><input type="file" name="file" class="file"></td>' +
                    '<td><div class="musicName"><input type="text" name="musicName"></div></td>' +
                    '<td><div class="musicSinger"><input type="text" name="singerName"></div></td>' +
                    '<td>' +
                    '<div class="musicSpecial">' +
                    '<input type="text" name="specialName">' +
                    '</div>' +
                    '</td>' +
                    '<td><input type="button" value="上传"></td>' +
                    '</td>' + '</form>' + '</tr>';
                $("table").append(dom);
            });
            delBtn.click(function () {
                var checkBox = $("input[type='checkbox']:checked");
                checkBox.each(function () {
                    var n = $(this).parents("tr").index();  // 获取checkbox所在行的顺序
                    $("table tr").eq(n).remove();
                });
            });

            var xhrOnProgress = function (fun) {
                xhrOnProgress.onprogress = fun; //绑定监听
                return function () {
                    //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                    var xhr = $.ajaxSettings.xhr();
                    //判断监听函数是否为函数
                    if (typeof xhrOnProgress.onprogress !== 'function')
                        return xhr;
                    //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                    if (xhrOnProgress.onprogress && xhr.upload) {
                        xhr.upload.onprogress = xhrOnProgress.onprogress;
                    }
                    return xhr;
                }
            };
            $('.uploadBtn').each(function () {
                $(this).on('click', function () {
                    var formData = new FormData($('#form')[0]);// 自动搜索表单信息(表单内没有name属性的input不会被搜索到)，IE<=9不支持FormData
                    formData.append('b', 3);// 还可以添加额外的表单数据

                    $.ajax({
                        type: 'post',
                        url: '/upload',
                        data: formData,
                        contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置(详见：#1)
                        processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post，详见：#2)
                        xhr: xhrOnProgress(function (e) {// (详见：#3)
                            var percent = e.loaded / e.total;//计算百分比
                            $('body').append('->' + percent);
                        }),
                        success: function (data) {
                            $('body').append('完成');
                            console.log(data);

                        }
                    })
                })
            });


        });


    </script>
</head>
<body>
<div>

    <table border="1">
        <th>删除</th>
        <th>文件名</th>
        <th>歌名</th>
        <th>歌手</th>
        <th>专辑</th>

        <tr>
            <td>
                <input type="checkbox">
            </td>
            <td>
                <input type="file" name="file" class="file">
            </td>
            <td>
                <div class="musicName">
                    <input type="text" name="musicName">
                </div>
            </td>
            <td>
                <div class="singer">
                    <input type="text" name="singerName">
                </div>
            </td>
            <td>
                <div class="musicSpecial">
                    <input type="text" name="specialName">
                </div>
            </td>
            <td>
                <input type="button" class="uploadBtn" value="上传">
            </td>
        </tr>
    </table>
    <p>
        <input type="button" value="添加" id="addBtn">
        <input type="button" value="删除" id="delBtn">
    </p>
    <form enctype="multipart/form-data" method="post" name="fileInfo">
        <p>
            <input type="file" name="file" class="file">
            <input type="text" name="musicName">
            <input type="text" name="singerName">
            <input type="text" name="specialName">
            <input type="button" class="uploadBtn" value="上传">
        </p>

    </form>

</div>

</body>
</html>